<template>
  <div class="detailed-page">
    <enterCodeModel
      :is-show="isShow"
      :search-word="search_word"
      @isShowClose="isShowClose"
    />
    <div class="haeder-around">
      <div class="search-input">
        <img src="@/static/icon/icon_search@3x.png">
        <input
          v-model="search_word"
          placeholder="搜索"
          @confirm="handleGetList('sear')"
        >
      </div>
    </div>
    <div class="count-around">
      <div>标准总数：{{ listTotal ? listTotal : 0 }}个</div>
    </div>
    <div class="list-around">
      <div
        v-for="item of infoList"
        class="card"
        @click="handleEditClick(item.id)"
      >
        <div class="card-header">
          {{ item.standard_name }}
        </div>
        <div class="card-content">
          <div v-for="its of titleList">
            {{ its.title }}: {{ item[its.type] }}
          </div>
        </div>
      </div>
    </div>
    <div class="button-around">
      <div
        class="select-button"
        @click="handleGetExcel"
      >
        导出
      </div>
    </div>
	<div class="fl-model" v-if="isShowBox" catchtouchmove >
	  <div class="model shadow" >
	    <div class="code-input">
	      <div>授权码</div>
	      <input placeholder="请输入" v-model="code">
	    </div>
	    <div class="model-button">
	      <div class="button-true button-fasle" @click="close">取消</div>
	      <div class="button-true" @click="handleCommitCode">确定</div>
	    </div>
	  </div>
	</div>
  </div>
</template>

<script>
import enterCodeModel from "@/components/enterCodeModel";
export default {
	name: "DetailedPage",
	components: {
		enterCodeModel
	},
	data() {
		return {
			isShow:false,
			isShowBox: false,
			eitId: '',
			code: '',
			search_word:'',// 搜索内容
			listTotal:0,// 总数量
			page:0,// 分页
			infoList:[],// 信息列表
			titleList: [
				{title:"标准号",type:"standard_number"},
				{title:"实施时间",type:"implement_date"},
				{title:"编码",type:"id"}
			]
		};
	},
	onReachBottom(){
		this.handleGetList('start');
	},
	methods: {
		// 编辑
		handleEditClick(id){
			this.eitId = id
			this.isShowBox = true
		},
		/**
		 * 关闭弹框
		 */
		close() {
			this.isShowBox = false
			 this.eitId = ''
			 this.code = ''
		},
		/**
		 * 确认跳转权限
		 */
		handleCommitCode(){
		  if(!this.code) return wx.showToast({title: '请输入授权码',icon: 'none'})
		  this.$api.UserPortalStandardVerifyCode({code: this.code}).then(res => {
			 wx.showToast({
			 	title: '授权成功',
			 })
			 this.isShowBox = false
			 this.code = ''
			 wx.navigateTo({
			 	url: "/pages/newBuild?id=" + JSON.stringify(this.eitId)
			 });
			 this.eitId = ''
		  })
		},
		isShowClose(){
			this.isShow = false;
		},
		handleGetExcel(){
			this.isShow = true;
		},
		handleGetList(type) {
			if(type !== 'start'){
				this.page = 0;
			}
      this.page++;
			if(type === 'sear'){
			  this.submitList.search_word = this.search_word
      }
      this.submitList.page = this.page
      this.$api.userPortalGetListByCon(this.submitList).then((res) => {
				this.listTotal = res.data.total;
				if(res.data.data.length === 0){
					return;
				}
				this.infoList.push(...res.data.data);
				if(type === 'sear'){
          this.infoList = res.data.data
        }
			});
		}
	},
	onLoad(option){
    this.submitList = JSON.parse(option.list)
    this.submitList.search_word = this.search_word
		this.handleGetList();
	}
};
</script>

<style scoped lang="scss">
  .detailed-page {
    min-height: 100%;
      .select-button {
        color: #FFFFFF;
        width: 100%;
        height: 75rpx;
        border-radius: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #59AC35;
      }
    .haeder-around {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 120rpx;
      padding: 24rpx;
      background-color: #6ACC40;
      .search-input {
        height: 80rpx;
        width: 100%;
        padding: 24rpx;
        background-color: #FFFFFF;
        display: flex;
        width: 100%;
        align-items: center;
        border-radius: 12rpx;
        input {
          font-size: 40rpx;
          border-left: 6rpx #6ACC40 solid;
          padding-left: 16rpx;
          margin-left: 12rpx;
        }
        img {
          width: 28rpx;
          height: 34rpx;
        }
      }
    }
    .count-around {
      width: 100%;
      height: 150rpx;
      display: flex;
      justify-content: start;
      align-items: center;
      padding-left: 48rpx;
      div {
        font-size: 40rpx;
        font-weight: 700;
        color: #59AC35;
        display: flex;
        justify-content: start;
      }
    }
    .list-around {
      min-height: 100%;
      width: 100%;
      padding: 0 24rpx 100rpx 24rpx;
      .card {
        margin-top: 24rpx;
        width: 100%;
        height: 340rpx;
        background-color: #FFFFFF;
        border-radius: 16rpx 16rpx 0 0;
        &:first-child {
          margin-top: 0;
        }
        .card-header {
          overflow: hidden;
          white-space: nowrap;
          text-overflow:ellipsis;
          border-radius: 16rpx 16rpx 0 0;
          width: 100%;
          height: 100rpx;
          padding: 24rpx;
          font-size: 40rpx;
          font-weight: 700;
          justify-content: start;
          align-items: center;
          border-bottom: #EEEEEE 4rpx solid;
        }
        .card-content {
          height: 240rpx;
          display: flex;
          align-items: start;
          flex-direction: column;
          font-size: 36rpx;
          justify-content: space-between;
          padding: 24rpx;
          font-weight: 700;
        }
      }
    }
  }

@keyframes show {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .fl-model {
    animation: show 0.5s;
    position: fixed;
	top: 0;
	left: 0;
    z-index: 1000;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0,0,0,0.7);
    .model {
      background-color: #FFFFFF;
      width: 650rpx;
      min-height: 280rpx;
      display: flex;
      border-radius: 16rpx;
      flex-direction: column;
      justify-content: space-between;
      padding: 24rpx;
      .code-input {
        width: 100%;
        padding: 28rpx;
        font-size: 40rpx;
        font-weight: 700;
        align-items: center;
        justify-content: space-between;
        display: flex;
        div {
          color: #59AC35;
        }
        input {
          margin-left: 26rpx;
          border: rgba(89,172,53,1) 2rpx solid;
          padding: 16rpx;
          height: 80rpx;
          width: 70%;
          font-size: 32rpx;
        }
      }
      .model-button {
        width: 100%;
        display: flex;
        justify-content: space-around;
        .button-true {
          width: 230rpx;
          height: 60rpx;
          display: flex;
          border-radius: 12rpx;
          background-color: #59AC35;
          color: #FFFFFF;
          font-size: 40rpx;
          justify-content: space-around;
          align-items: center;
          font-weight: 700;
        }
        .button-fasle {
          border: 2rpx #59AC35 solid;
          background-color: #FFFFFF;
          color: #59AC35;
        }
      }
    }
  }
</style>
